package pages

import (
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ Tabs() {
	@layouts.DocsLayout(
		"Tabs",
		"Navigation interface that organizes content into sections.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				ID:   "api",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "tabs",
						Text: "Tabs",
					},
					{
						ID:   "list",
						Text: "List",
					},
					{
						ID:   "trigger",
						Text: "Trigger",
					},
					{
						ID:   "content",
						Text: "Content",
					},
				},
			},
			{
				ID:   "javascript-api",
				Text: "JavaScript API",
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Tabs",
			Description: templ.Raw("Navigation interface that organizes content into sections."),
			Tailwind:    true,
			VanillaJS:   true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Tabs",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				ShowcaseFile:    showcase.TabsDefault(),
				PreviewCodeFile: "tabs_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "tabs",
					JSFiles:       []string{"tabs"},
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api",
			}) {
				@modules.APILegend()
				<div id="tabs" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Tabs",
						Description: "Root container for the tabs component.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the tabs container. Auto-generated if not provided.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the tabs container.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the tabs container.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="list" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "List",
						Description: "Container for tab triggers with styled background and indicator.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the tab list element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the tab list.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the tab list element.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="trigger" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Trigger",
						Description: "Individual tab button that activates corresponding content.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the tab trigger element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the tab trigger.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the tab trigger element.",
								Required:    false,
							},
							{
								Name:        "Value",
								Type:        "string",
								Default:     "",
								Description: "Unique value that identifies this tab and its corresponding content.",
								Required:    true,
							},
							{
								Name:        "IsActive",
								Type:        "bool",
								Default:     "false",
								Description: "Whether this tab is currently active/selected.",
								Required:    false,
							},
							{
								Name:        "TabsID",
								Type:        "string",
								Default:     "",
								Description: "ID of the parent tabs container. Auto-detected if not provided.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="content" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Content",
						Description: "Container for tab content that shows when corresponding trigger is active.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the tab content element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the tab content.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the tab content element.",
								Required:    false,
							},
							{
								Name:        "Value",
								Type:        "string",
								Default:     "",
								Description: "Value that matches the corresponding tab trigger.",
								Required:    true,
							},
							{
								Name:        "IsActive",
								Type:        "bool",
								Default:     "false",
								Description: "Whether this content is currently visible/active.",
								Required:    false,
							},
							{
								Name:        "TabsID",
								Type:        "string",
								Default:     "",
								Description: "ID of the parent tabs container. Auto-detected if not provided.",
								Required:    false,
							},
						},
					})
				</div>
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "JavaScript API",
				ID:    "javascript-api",
			}) {
				@modules.Code(modules.CodeProps{
					Language:       "javascript",
					ShowCopyButton: true,
					CodeContent: `// Set active tab programmatically
window.tui.tabs.setActive("tabs-id", "tab-value");`,
				})
			}
		}
	}
}
